<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common :: header"/>
<style>
  a{text-decoration:none;color:#337ab7 !important;cursor: pointer;}
  .div_avatar{text-align: center;}
  .div_avatar p{margin-bottom: 10px;}
  .div_avatar img{width: 120px;min-height:120px;}

  ul>li{margin-left:40px;line-height: 40px;}
  li>i{margin-right: 8px;}

  .layui-input-inline{width: 240px !important;}
  .layui-form{margin-top: 20px;margin-bottom: 30px;}

</style>
<body>
<div class="layui-fluid">
  <div class="layout-row layui-col-space10">
    <div class="layout-left" style="width: 350px;">
      <div class="layui-card">
        <div class="layui-card-header">个人资料</div>
        <div class="layui-card-body">
          <div class="div_avatar" style="text-align: center">
            <p style="margin-bottom: 10px"><img id="avatar_img" onerror="imgerrorfun()" th:src="${user.avatar}"/></p>
            <p style="margin-bottom: 10px"><a id="avatar_btn">修改头像</a></p>
          </div>
          <ul style="margin-bottom: 30px">
            <li><i class="layui-icon layui-icon-username"></i>帐号名称：
              <span>[[${user.loginName}]]</span>
            </li>
            <li><i class="layui-icon layui-icon-user"></i>用户姓名：
              <span id="span_userName">[[${user.userName}]]</span>
            </li>
            <li><i class="layui-icon layui-icon-cellphone-fine"></i>电话号码：
              <span id="span_phone">[[${user.phone}]]</span>
            </li>
            <li><i class="layui-icon layui-icon-location"></i>所属部门：
              <span>[[${user.dept.deptName}]]</span>
            </li>
            <li><i class="layui-icon layui-icon-email"></i>邮箱地址：
              <span id="span_email">[[${user.email}]]</span>
            </li>
            <li><i class="layui-icon layui-icon-log"></i>创建时间：
              <span>[[${#dates.format(user.createTime,'yyyy-MM-dd HH:mm')}]]</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="layout-center">
      <div class="layui-card">
        <div class="layui-card-header">基本资料</div>
        <div class="layui-card-body">
          <div class="layui-form" lay-filter="userForm">
            <div class="layui-form-item">
              <label class="layui-form-label">姓名</label>
              <div class="layui-input-inline">
                <input type="text" name="userName" lay-verify="nickname" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">性别</label>
              <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男" checked>
                <input type="radio" name="sex" value="2" title="女" >
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">手机</label>
              <div class="layui-input-inline">
                <input type="text" name="phone" lay-verify="phone" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">邮箱</label>
              <div class="layui-input-inline">
                <input type="text" name="email" lay-verify="email" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="setmyinfo">确认修改</button>
                <button type="reset" class="layui-btn layui-btn-primary" onclick="resetForm()">重置信息</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  const upload = layui.upload;
  const form = layui.form;

  $(function () {
    form.render();
    resetForm();
  })

  //给表单赋值
  function resetForm(){
    form.val("userForm", {
      "userName": "[[${user.userName}]]",
      "sex": "[[${user.sex}]]",
      "phone": "[[${user.phone}]]",
      "email": "[[${user.email}]]"
    });
  }

  form.verify({
    nickname: function (t, i) {
      return new RegExp("^[a-zA-Z0-9_一-龥\\s·]+$").test(t) ? /(^\_)|(\__)|(\_+$)/.test(t) ? "用户名首尾不能出现下划线'_'" : /^\d+\d+\d$/.test(t) ? "用户名不能全为数字" : void 0 : "用户名不能有特殊字符"
    }
  })

  form.on("submit(setmyinfo)", function (t) {
    dm.post('/system/personal/update', t.field, res =>{
      $('#span_userName').html(t.field.userName);
      $('#span_phone').html(t.field.phone);
      $('#span_email').html(t.field.email);
    })
  });

  function imgerrorfun(){
      var img=event.srcElement;
      img.src="/js/easyui/themes/insdep/images/portrait129x129.png";
      img.onerror=null;
  }

  upload.render({
    elem: '#avatar_btn',
    url: '/system/personal/updateAvatar',
    accept: 'images',
    acceptMime: 'image/*',
    before: function(){
      layer.load();
    },
    done: function(res){
      layer.closeAll("loading");
      if (res.code > 0) {
        dm.msgError("上传失败！");
        return layer.msg('上传失败');
      } else {
        dm.msgSuccess('上传成功！');
        $('#avatar_img').attr('src', res.data);
      }
    }
    ,error: function(){
      layer.closeAll("loading");
      dm.msgWarning("上传失败，请稍后再试");
    }
  });
</script>
</body>
</html>